:root {
	
	/*Header description*/
	--Header_BackgroundColor: #373333;
	
	/*Body description*/
	--Body_BackgroundColor: #373333;
	
	/*Left Menu description*/
	--Left_Menu_BackgroundColor: #373333;
	--Left_Menu_Font: Libre_Baskerville;
	--Left_Menu_FontSize: 12px;
	--Left_Menu_FontColor: white;
	--Left_Menu_LetterSpacing: 0px;
	
	/*Logo description*/
	--Logo_Font: Libre_Baskerville;
	--Logo_FontSize: 42px;
	--Logo_FontColor: white;
	
	/*Menu famille description*/
	--Menu_Famille_Font: Libre_Baskerville;
	--Menu_Famille_FontSize: 13px;
	--Menu_Famille_FontColor: white;
	--Menu_Famille_FontColor_Active: #c1961d;
	--Menu_Famille_LetterSpacing: 1px;
	
	/*Title section description*/
	--Title_Section_Font: Libre_Baskerville;
	--Title_Section_FontSize: xx-large;
	--Title_Section_FontColor: white;
	--Title_Section_BackgroundColor: transparent;
	--Title_Section_Cadre_BackgroundColor: #373333;
	--Title_Section_LetterSpacing: 1px;
	--Title_Section_FontWeight: normal;
	
	/*Pane container description*/
	--Pane_Container_BackgroundColor: #373333;
	
	/*Pane container Alternate description*/
	--Pane_Container_Alternate_BackgroundColor: #373333;
	
	/*Center container description*/
	--Center_Container_BackgroundColor: #373333;
	
	/*Card Title description*/
	--Card_Title_BackgroundColor: transparent;
	--Card_Title_Font: Libre_Baskerville;
	--Card_Title_FontSize: 21px;
	--Card_Title_Mobile_FontSize: 14px;
	--Card_Title_FontColor: #3a1d26;
	--Card_Title_LetterSpacing: 0px;
	
	/*Card Text description*/
	--Card_Text_BackgroundColor: transparent;
	--Card_Text_Font: Open-sans;
	--Card_Text_FontSize: 17px;
	--Card_Text_Mobile_FontSize: 14px;
	--Card_Text_FontColor: #3a1d26;
	--Card_Text_LetterSpacing: 0px;
	
	/*Card description*/
	--Card_BackgroundColor: #e5ddc6;
	
	/*List Title description*/
	--List_Title_BackgroundColor: transparent;
	--List_Title_Font: Libre_Baskerville;
	--List_Title_FontSize: 16px;
	--List_Title_FontColor: white;
	--List_Title_LetterSpacing: 0px;
	
	/*List Text description*/
	--List_Text_BackgroundColor: transparent;
	--List_Text_Font: Open-sans;
	--List_Text_FontStyle: italic;
	--List_Text_FontSize: 16px;
	--List_Text_FontColor: #b9b9b9;
	--List_Text_LetterSpacing: 0px;
}

@font-face{
	font-family: 'New_Tegomin';
	src: url('../fonts/New_Tegomin/NewTegomin-Regular.ttf');
}

@font-face{
	font-family: 'Cormorant_garamond';
	src: url('../fonts/Cormorant_garamond/CormorantGaramond-Bold.ttf');
}

@font-face{
	font-family: 'Libre_Baskerville';
	src: url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf');
}

@font-face{
	font-family: 'Open_Sans';
	src: url('../fonts/Open_Sans/OpenSans-SemiBold.ttf');
}

body {
    background-image: inherit;
}


#identity {
	display: flex;
    flex-direction: column;
	background-color: var(--Header_BackgroundColor);
}

.mini {
    height: 0px;
}

#center {
	background-color: var(--Center_Container_BackgroundColor);
}

.cSpecial{
	background-color: var(--Card_BackgroundColor);
}

body{
	background-color: var(--Body_BackgroundColor);
}

.ListeTitle{
	font-family: var(--List_Title_Font);
	font-size: var(--List_Title_FontSize);
	letter-spacing: var(--List_Title_LetterSpacing);
	line-height: 1.2em;
	color: var(--List_Title_FontColor);
	background-color: var(--List_Title_BackgroundColor);
}
.ListeText{
	font-family: var(--List_Text_Font);
	font-size: var(--List_Text_FontSize);
	font-style: var(--List_Text_FontStyle);
	letter-spacing: var(--List_Text_LetterSpacing);
	color: var(--List_Text_FontColor);
	background-color: var(--List_Text_BackgroundColor);
}

@media screen and (min-width: 640px) { /*sur ordi et tablette */
	
	.logo{
		font-family: var(--Logo_Font);
		font-size: var(--Logo_FontSize);
		color: var(--Logo_FontColor);
		margin-top: 8px;
		width: 400px;
	}
	
    .branding {
		display: flex;
        position: relative;
        margin-top: inherit;
		left: inherit;
        margin-left: inherit;
    }
	
	.divLay {
		background-color: var(--Left_Menu_BackgroundColor);
	}
	
	.divLayCenter {
		top: inherit;
		background-color: inherit;
	}
	
	.divButton {
		color: #f8f9fa;
		font-family: Open_Sans;
	}
	
	.MenuTab2 {
		font-family: var(--Menu_Famille_Font);
		font-size: var(--Menu_Famille_FontSize);
		letter-spacing: var(--Menu_Famille_LetterSpacing);
		color: var(--Menu_Famille_FontColor);
	}
	
	.MenuTab2_Active {
		color: var(--Menu_Famille_FontColor_Active);
	}
	
	a.MenuTab2:hover{
		color: #c1961d;
	}
	
	.nav2 {
		height: 100%;
        background-color: inherit;
    }
	
	.navTest {
		display: flex;
	}
	
	.classTitle a {
		font-family: var(--Title_Section_Font);
		font-size: var(--Title_Section_FontSize);
		Font-weight: var(--Title_Section_FontWeight);
		text-transform: uppercase;
		letter-spacing: var(--Title_Section_LetterSpacing);
		line-height: 1.2em;
		color: var(--Title_Section_FontColor);
		background-color: var(--Title_Section_BackgroundColor);
	}
	
	.classTitle {
		height: 50px;
		background-color: var(--Title_Section_Cadre_BackgroundColor);
		scroll-margin-top: 10px;
	}
	
	#nav > div{
		font-family: var(--Left_Menu_Font);
		font-size: var(--Left_Menu_FontSize);
		color: var(--Left_Menu_FontColor);
		background-color: var(--Left_Menu_BackgroundColor);
		letter-spacing: var(--Left_Menu_LetterSpacing);
	}
	
	.descriptPhoto {
		font-family: var(--Card_Text_Font);
		font-size: var(--Card_Text_FontSize);
		letter-spacing: var(--Card_Text_LetterSpacing);
		color: var(--Card_Text_FontColor);
		background-color: var(--Card_Title_BackgroundColor);
		height: 94px;
	}
	
	.titlePhoto {
		font-family: var(--Card_Title_Font);
		font-size: var(--Card_Title_FontSize);
		letter-spacing: var(--Card_Title_LetterSpacing);
		color: var(--Card_Title_FontColor);
		background-color: var(--Card_Title_BackgroundColor);
		line-height: 1;
		padding-bottom: 10px;
	}
	
	.classMess {
		display: flex;
		background-color: black;
		color: white;
	}
	.classMessAlt {
		font-size: 18px;
		font-family: Cormorant_Garamond;
		color: white;
	}
	
	
	.paneContainer {
		background-color: var(--Pane_Container_BackgroundColor);
		/*color: white;*/
	}
	
	.paneContainerAlternate {
		background-color: var(--Pane_Container_Alternate_BackgroundColor);
		/*color: white;*/
	}
	
	.cSpecial:hover {
		transition-duration: 0.5s;
		box-shadow: 0px 0px 7px 5px #fff;
	}
	
	.connected {
		top: 22px;
	}
	
	img {
		border-radius: 2px;
	}
	
	#cart {
		top: 20px;
	}
}

@media screen and (max-width: 640px) { /*sur mobile*/

	.titlePhoto {
		font-family: var(--Card_Title_Font);
		font-size: var(--Card_Title_Mobile_FontSize);
		Font-weight: inherit;
		letter-spacing: var(--Card_Title_LetterSpacing);
		color: var(--Card_Title_FontColor);
		background-color: var(--Card_Title_BackgroundColor);
		line-height: 1;
		padding-top: 2px;
		padding-bottom: 8px;
	}
	
	.descriptPhoto {
		font-family: var(--Card_Text_Font);
		font-size: var(--Card_Text_Mobile_FontSize);
		letter-spacing: var(--Card_Text_LetterSpacing);
		color: var(--Card_Text_FontColor);
		background-color: var(--Card_Title_BackgroundColor);
		height: 55px;
		position: absolute;
        top: 157px;
	}
	
	.cardToolbar {
		top: 0px;
		background-color: #272e48bd;
		z-index: 1;
	}
	
	.branding {
		top: 15px;
		left: 60px;
	}
	
	.logo {
		font-family: Cormorant_Garamon;
		font-size: 25px;
		color: white;
	}
	
	.container {
        width: 100%;
        position: relative;
        top: 30px;
        height: 52px;
        line-height: 1;
    }
	
	.navTest {
        background-color: transparent;
		top: 61px;
		height: 69px;
    }
	
	.nav2 {
		background-color: var(--Center_Container_BackgroundColor);
	}
	
	.MenuTab2 {
		font-family: Open_Sans;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 1px;
		color: white;
	}
	
	.divLayCenter {
		position: relative;
		top: inherit;
		background-color: var(--Center_Container_BackgroundColor);
	}
	
	.divButton {
		font-family: var(--Font_Section_title);
		background-color: #656162;
		color: white;
	}
	
	.pricePhoto {
        height: inherit;
		top: 92%;
    }
	
	#nav > div {
		font-family: var(--Left_Menu_Font);
		font-size: var(--Left_Menu_FontSize);
		color: var(--Left_Menu_FontColor);
	}
	
	/* .classTitle a {
        font-family: Cormorant_Garamond;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 1.2em;
        color: white;
    } */
	
	.classTitle a {
        font-family: var(--Title_Section_Font);
        font-weight: var(--Title_Section_FontWeight);
        text-transform: uppercase;
        letter-spacing: var(--Title_Section_LetterSpacing);
        line-height: 1.2em;
        color: var(--Title_Section_FontColor);
    }
	
	.classMess {
		background-color: inherit;
		color: var(--Title_Section_FontColor); 
	}
	
	.classMessAlt {
        color: var(--Title_Section_FontColor); 
    }
	
	#paneContainer {
		background-color: var(--Center_Container_BackgroundColor);
	}
	
	.paneContainerAlternate {
		background-color: var(--Center_Container_BackgroundColor);
		color: white;
	}
	
	/* .connected {
		top: 22px;
		right: 15%;
		width: 300px;
	} */
	
	.pastilleCart {
		width: 24px;
		height: 24px;
		left: 36px;
		font-size: 14px;
		top:-4px;
	}
	
	#cart {
		position: absolute;
		top: 23px;
		right: 9%;
		/* margin-right: -35px; */
		/* margin-top: -17px; */
		cursor: pointer;
	}
	
	#addressMob {
		display: inherit;
	}
	
	.bottomMenu {
        background-color: black;
        color: white;
    }
	
	.prodListDetail {
		position: relative;
		top: 100px;
	}
}